<template>
  <div class="">
    <h1>商品列表</h1>
    <div v-for="product in products" :key="product.id">
        <h2>{{product.name}}</h2>
        <p>{{product.price.toFixed(2)}}元</p>
        <button @click="addToCart(product)">添加到购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        products: [  
          { id: 1, name: '可乐', price: 10.99 },  
          { id: 2, name: '鞋子', price: 20.99 },  
          { id: 3, name: '薯片', price: 3.55 },  
          { id: 4, name: '短袖', price: 20.99 },  
          // ... 更多商品  
        ],  
    }
  },
  methods:{
    addToCart(product){
        this.$store.commit('addToCart',product);
    }
  }
};
</script>

<style scoped lang="scss">
</style>